<!-- tag标签页 -->
<template>
  <div class="box_list">
    <el-scrollbar ref="tagsBar">
      <template v-for="(item,index) in listTag">
        <el-dropdown trigger="contextmenu" :ref="item.path" :hide-timeout="80" @command="handlerCommand" :key="item.path">
          <div>
            <el-tag :key="item.path" @click="handTag(index)" @contextmenu.prevent.native="handlerMenuOpen(item.path)" @close="removeList(index)" :type="item.path==$route.path?'':'info'" :effect="item.path==$route.path?'dark':'plain'" :closable="item.name=='home'?false:true">
              <i :class="item.path!=$route.path?'active-icon':'el-icon-rank'"></i>
              <span>{{$t(item.meta.title)}}</span>
            </el-tag>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-refresh-right" :command="{code:1,path:item.path}">刷新</el-dropdown-item>
              <el-dropdown-item icon="el-icon-close" :disabled="index==listTag.length-1||listTag.length==1" :command={code:2,path:item.path}>关闭右侧标签</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-close" :disabled="listTag.length==1" :command={code:3,path:item.path}>全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-scrollbar>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {}

  },
  computed: {
    ...mapState({ listTag: state => state.tabpageModule.listTag })  //tag默认数据
  },
  watch: {
    $route(to) { //监听路由是否发生改变
      this.$store.dispatch('addList', to)
    }
  },
  created() {
    this.addList(this.$route) //避免刷新后当前选中的标签页会消失
    //this.$route当前激活的路由信息对象  this.$router：全局的 router 实例
  },
  methods: {
    ...mapActions([
      'addList',
      'handlerCommand',
      'removeList',
      'handlerClickTag',
      'handTag'
    ]),
    // 显示菜单
    handlerMenuOpen(path) {
      this.$refs[path][0].show();
    },

  }

}
</script>
<style scoped lang="less">
.box_list {
  border-top: 1px solid #ababac59;
  border-bottom: 1px solid #ababac59;
  height: 40px;
  line-height: 40px;
  margin-left: -20px;
  padding: 0px 20px;

  // overflow-x: auto;
  &::v-deep .el-scrollbar__wrap {
    padding: 1px 0; //解决出现纵向滚动的bug
    display: flex;

    .el-scrollbar__view {
      display: inline-block; //解决删除时，第一次出现标签没有溢出时，也会出现横向滚动的滚动条
      white-space: nowrap; //标签显示在同一行
    }
  }
}

.el-tag {
  margin-right: 7px;
  border-radius: 0;

  .active-icon {
    //图标隐藏
    display: none;
  }
}

.el-tag--dark {
  border: none !important;
}
</style>
